<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>	
<script type="text/javascript">

$.ajaxSetup ({
   cache: false //关闭AJAX相应的缓存
});

var isIe = $.browser.msie;
var valueFilterNum = 0;

//定义全局变量记录分页信息  
var paramData = {  
 page:1,  
 rows:60,
 sortOrder:'desc', 
 sortColumn:'id'
};  
var msgOut={};

//Loading dialog function
function ajaxLoading(){ 
    $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%"}).appendTo("body"); 
    $("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2}); 
} 
//Load end dialog function
function ajaxLoadEnd(){ 
     $(".datagrid-mask").remove(); 
     $(".datagrid-mask-msg").remove();             
}
//open loading dialog
ajaxLoading();

$(function(){
	datagrid.datagridObj.pagination=true;
	
	datagrid.datagridObj.onLoadSuccess=function(){ 
    	$('#'+datagrid.datagridId).datagrid('loaded'); 
        $("#queryBtn_Filter").removeAttr("disabled"); 
	    $('.editcls').linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'});  //给每行后的button加easyui样式
	    $('.delcls').linkbutton({text:'历史',plain:true,iconCls:'icon-remove'});
	    
	};
	
	$('#'+datagrid.datagridId).datagrid(datagrid.datagridObj);
	
	var pager=$('#'+datagrid.datagridId).datagrid('getPager');
	$(pager).pagination({
		pageSize:paramData.rows,
		pageList:[60,80,100,200],
		beforePageText: '第',//页数文本框前显示的汉字   
        afterPageText: '页    共 {pages} 页',   
        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
        onSelectPage:function(pageNumber,pageSize){
	    	paramData.page = pageNumber;
	    	paramData.rows = pageSize; 
	    	reLoadData(); 
        }
	});
	//load end,show condition layout div
	$("#conditionNorth").css('visibility','visible');
	//load end ,close loading dialog 
	ajaxLoadEnd();
	//execute query
	queryBtn_Filter();
	
});

function addConditionFun(){
	for(var i=0; i<columnPropertyArr.length;i++){
		var key = columnPropertyArr[i];
		var type = columnPropertyTypeArr[i];
		var paramValue = '';
		if(type == 'date'){
			//DateBox 日期框
			paramValue=$("#"+key).datebox('getValue');
		}else if(type == 'option'){
			//select
			paramValue=$("#"+key).combobox('getValue');
		}else{
			//Input Select
			paramValue = $("#"+key).val();
		}
		if(paramValue == ''){
			delete paramData[key];
			continue;
		}
		//后台提交参数
		paramData[key] = paramValue;
	}
	
	
}


function sortOrderFun(order){
	paramData.sortOrder=order;
}

function reLoadData(){
	//$('#queryBtn_Filter').val('处理中..');
	$("#queryBtn_Filter").attr({"disabled":"disabled"});

	$('#'+datagrid.datagridId).datagrid('loading');//打开等待div  
	$.ajax({
		type:"POST",
		url:datagrid.datagridUrl,
		dataType:"json",
		data:paramData,
		success:function(msg){
			/*if(isIe){
				msgOut = msg;
				var msgNew = {};
				msgNew.total=msg.total-msg.rows.length;
				msgNew.rows=[];
				msgNew.footer=msg.footer;
				$('#'+datagrid.datagridId).datagrid('loadData',msgNew); 
			}else*/{
				$('#'+datagrid.datagridId).datagrid('loadData',msg); 
			}
		},
		error:function(er){
			//alert(er.responseText.trim());
			if(er.responseText!='' && er.responseText.indexOf('date error')!=-1){
				alert(er.responseText);
			}else{
				if(er.responseText!='' && er.responseText.indexOf('资源权限未分配')!=-1){
					alert('资源权限未分配');
				}
				if(er.responseText!='' && er.responseText.indexOf('登录')!=-1){
					alert('会话超时，请重新登录');
				}else{
					alert(er.responseText.trim());
					//alert('系统出错或无操作权限');
				}
			}
	        $("#queryBtn_Filter").removeAttr("disabled"); 
	        $('#'+datagrid.datagridId).datagrid('loaded');
		}
	});
	
}

//查询
function queryBtn_Filter(){
	addConditionFun();
	var sortColumn = $("#propertySortSelect_Filter").combobox('getValue');
	if(sortColumn=='0'){
		return ;
	}
	paramData.sortColumn = sortColumn;
	//paramData.page=1;
	
	reLoadData();  
};

</script>
<style type="text/css">
.condition{
	float:left; 
	height:25px;
	border:1px solid #fff;
}
.condition .mylabel{
	width:80px;
	float:left; 
	border:0px solid #fff;
}
.condition .myinput{
	width:150px;
	float:left; 
	border:0px solid #fff;
}
.condition .myfilter{
	width:200px;
	float:left; 
	border:0px solid #fff;
}

.clearboth{
	clear:both;
}

</style>
</head>

<%@taglib uri="/struts-tags" prefix="s" %>  
<body>
<div class="easyui-layout" data-options="fit:true"  id="conditionNorth" style="visibility:hidden;">
	<div data-options="region:'east'" style="width:100px;text-align:center; ">
		<div style="height: 2px;"></div>
		<a id='queryBtn_Filter' href='#' class='easyui-linkbutton' data-options="iconCls:'icon-search'" onclick='javascript:queryBtn_Filter();'>查询</a>
	</div>
	<div data-options="region:'center'" style="overflow:hidden;">
		<script type="text/javascript">
		var columnPropertyArr = new Array();
		var columnPropertyTypeArr = new Array();
		</script>
		<s:iterator id="column" value="#attr.conditionColumnList" status="st" >
		<div class="condition">
			<!-- 输入框 -->
			<s:if test="#column.hasOptions==0">
				<s:if test="#column.columnType=='date'">

					<div class="dateitem">
						<label class="mylabel"><s:property value="columnShowName"/>：</label>
						<div class="myinput"><input type="text" id="${columnName}" name="${columnName}" size='20' class='easyui-datebox'/></div>
						<!-- 日期范围 -->
						<label class="mylabel"><s:property value="columnShowName"/>(起)：</label>
						<div class="myinput"><input type="text" id="${columnName}_Start" name="${columnName}_Start" size='20' class='easyui-datebox'/></div>
						<label class="mylabel"><s:property value="columnShowName"/>(止)：</label>
						<div class="myinput"><input type="text" id="${columnName}_End" name="${columnName}_End" size='20' class='easyui-datebox'/></div>
						<script type="text/javascript">
						columnPropertyArr[columnPropertyArr.length] = '${columnName}';
						columnPropertyArr[columnPropertyArr.length] = '${columnName}_Start';
						columnPropertyArr[columnPropertyArr.length] = '${columnName}_End';
						columnPropertyTypeArr[columnPropertyTypeArr.length] = 'date';
						columnPropertyTypeArr[columnPropertyTypeArr.length] = 'date';
						columnPropertyTypeArr[columnPropertyTypeArr.length] = 'date';
						</script>
					</div>
				</s:if>
				<s:elseif test="#column.columnType=='datetime'">
					<div class="dateitem">
						<!-- 日期时间范围 -->
						<label class="mylabel"><s:property value="columnShowName"/>(起)：</label>
						<div class="myinput"><input type="text" id="${columnName}_Start" name="${columnName}_Start" size='20' class='easyui-datetimebox'/></div>
						<label class="mylabel"><s:property value="columnShowName"/>(止)：</label>
						<div class="myinput"><input type="text" id="${columnName}_End" name="${columnName}_End" size='20' class='easyui-datetimebox'/></div>
						<script type="text/javascript">
						columnPropertyArr[columnPropertyArr.length] = '${columnName}_Start';
						columnPropertyArr[columnPropertyArr.length] = '${columnName}_End';
						columnPropertyTypeArr[columnPropertyTypeArr.length] = 'date';
						columnPropertyTypeArr[columnPropertyTypeArr.length] = 'date';
						</script>
					</div>
				</s:elseif>
				<s:else>
					<div class="item">
						<label class="mylabel"><s:property value="columnShowName"/>：</label>
						<div class="myinput"><input type="text" id="${columnName}" name="${columnName}"/></div>
						<script type="text/javascript">
						columnPropertyArr[columnPropertyArr.length] = '${columnName}';
						columnPropertyTypeArr[columnPropertyTypeArr.length] = 'input';
						</script>
					</div>
				</s:else>
			</s:if>
			<!-- 多选择框 -->
			<s:else>
				<!-- 判断下有没有默认值：有=默认选择默认值，没有=默认选择全部（新加一个全部）这个在TAG里做好 -->
				<div class="item">
					<label class="mylabel"><s:property value="columnShowName"/>：</label>
					<div class="myinput">
						<s:select 
						    id="%{#column.columnName}"
						    name="%{#column.columnName}"
						    value="%{#column.defaultKey}"
						    list="#column.a1TemplateColumnOptionDtoList" 
						    listKey="keyName" 
						    listValue="valueName"
						    theme="simple"
						    cssStyle="width:100px"
					    	cssClass="easyui-combobox"/>
				    </div>
					<script type="text/javascript">
					columnPropertyArr[columnPropertyArr.length] = '${columnName}';
					columnPropertyTypeArr[columnPropertyTypeArr.length] = 'option';
					</script>
			    </div>
			</s:else>
		</div>
		</s:iterator>  
		
		 
		<div class='condition'>
			<label class="mylabel">排序属性：</label>
			<div class="myfilter">
				 
				<s:select 
				    id="propertySortSelect_Filter"
				    name="propertySortSelect_Filter"
				    list="#attr.sortColumnList" 
				    listKey="columnName" 
				    listValue="columnShowName"
				    theme="simple"
				    cssStyle="width:100px"
			    	cssClass="easyui-combobox"/>
			    	 
				<input name="sortOrder" value="asc" type="radio"  onclick="javascript:sortOrderFun('asc');">
				升序
				<input name="sortOrder" value=desc type="radio" onclick="javascript:sortOrderFun('desc');" checked="checked">
				降序
			</div>
		</div>
		<div class="clearboth"></div>
		<div style="height: 0px;"></div>
	</div>
</div>			
</body>
</html>